
  
.st_area{//骨架区begin
    width: 100%;
    display: flex;
    .st_area_left{
        flex: 0.8;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 40rpx;
        .st_area_left_image{
            width: 30%;
            height: 30rpx;
            background-color: #EDEDED;
        }
        .st_area_left_num{
            margin: 10rpx 0;
            background-color: #EDEDED;
            width: 25%;
            height: 10rpx;
        }
    }
    .st_area_right{
        flex: 4;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .st_area_right_title{
            width: 80%;
            height: 30rpx;
            background-color: #EDEDED;
            margin-top: 30rpx;
        }
        .st_area_right_info{
            display: flex;
            align-items: center;
            margin-top: 20rpx;
            margin-bottom: 24rpx;
            .st_area_right_avatar{
                display: inline-block;
                width: 50rpx;
                height: 50rpx;
                background-color: #EDEDED;
                border-radius: 40rpx;
            }
            .st_area_right_other{
                display: inline-block;
                margin-left: 20rpx;
                width: 200rpx;
                height: 25rpx;
                background-color: #EDEDED;
            }
        }
    }
}//骨架区end

.forum_wrap{
    .forum_header{
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        // border-bottom: 2rpx solid #BBBBBB;
        border-bottom-left-radius: 25rpx;
        border-bottom-right-radius: 25rpx;
        position: -webkit-sticky;
        position: sticky;
        top:0;
        padding: 5px 16px 10px;
        box-shadow: 0px 3px 14px rgba(0, 0, 0, 0.05);
       .forum_search{
            position: static;
            height: 72rpx;
            left: 32rpx;
            right: 128rpx;
            top: calc(50% - 36px/2 - 2.5px);
            background: #F5F5F5;
            border-radius: 10px;
            /* Inside Auto Layout */
            flex: none;
            order: 0;
            flex-grow: 1;
            // margin: 0px 16px;
        input[type="text"]{
            justify-content: center;
            align-items: center;
            border-radius: 35rpx;
            padding-top: 15rpx ;
            padding-left: 85rpx;
            font-size: 35rpx;
        }
        image{
            position: absolute;
            top: 25rpx;
            left: 58rpx;
            width: 5%;
            height: auto;
        }
       }
       .add {
        // width: 40rpx;
        // height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        // margin-right: 10rpx;
        margin-left: 30rpx;
        image{
            width: 40rpx;
            height: auto;
        }
       }
    }
    .forum_content{
        margin: 10rpx 10rpx;
        padding: 10rpx;
        background-color: #fff;
        // height:  100%;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        .swiper-nav {
            background-color: #fff;
            padding-bottom: 5rpx;
            font-family: "PingFang SC";
            white-space: nowrap;
            position: -webkit-sticky;
            position: sticky;
            top:103rpx;
            // padding: 5px 16px 10px;
            .item-nav {
                position: relative;
                padding: 10rpx 42rpx;
                color: #999;
                font-size: 30rpx;
                cursor: pointer;
                display: inline-block;
                -webkit-tap-highlight-color:rgba(0,0,0,0);
            }
            .active {color: #333333;
            }
            .active::after {
                content:'';
                position: absolute;
                left: 32rpx;
                right: 32rpx;
                height:0;
                border-bottom: 4rpx solid #91AAD0;
                border-radius: 4rpx;
                bottom: 0rpx
              }
        }
        .forum_content_wrap{

            .forum_list_item{//帖子预览
                width: 100%;
                display: flex;
                .item_reply{//左半边回复区
                    flex: 14;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding-top: 40rpx;
                    image{
                        width: 30%;
                        height: auto;
                    }
                    .reply_num{
                        padding: 10rpx 0;
                        font-size: 25rpx;
                        color: #687980;
                    }
                }
                .item_content{//右半边
                    flex: 61;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    // border-bottom: 0.25rpx solid #bdc7c9;
                    .item_title{//标题
                        width: 600rpx;
                        font-family: "PingFang SC";
                        font-style: normal;
                        font-weight: normal;
                        font-size: 16px;
                        line-height: 22px;
                        color: #333333;
                        // letter-spacing:1rpx;
                        padding-top: 32rpx;
                    }
                    .item_info{
                        display: flex;
                        align-items: center;
                        padding-top: 28rpx;
                        padding-bottom: 32rpx;
                        .item_avatar{
                            // flex: 0.5;
                            display: inline-block;
                            width: 38rpx;
                            height: auto;
                            border-radius: 40rpx;
                        }
                        .item_name{
                            // flex: 2;
                            font-family: PingFang SC;
                            font-style: normal;
                            font-weight: normal;
                            font-size: 30rpx;
                            line-height: 15px;
                            text-align: center;
                            padding-left: 12rpx;
                            /* Style */
                            color: #99A2AD;
                            white-space: nowrap;
                        }
                        .item_gap{
                            font-family: PingFang SC;
                            font-style: normal;
                            font-weight: normal;
                            font-size: 11px;
                            line-height: 15px;
                            text-align: center;
                            padding-left: 12rpx;
                            /* Style */
                            color: #99A2AD;
                            white-space: nowrap;
                        }
                        .item_time{
                            display: inline-block;
                            margin-left: 12rpx;
                            font-size: 22rpx;
                            color: #99A2AD;
                        }

                    }
                }
            }
        }
    }
    .block{
        height: 120rpx;
        width: 100%;
        background-color: transparent;
    }
    .add_article{
        background-color: transparent;
        position: fixed;
        bottom: 150rpx;
        right: 40rpx;
        width: 100rpx;
        image{
            width: 100%;
        }
    }
}